<template>
  <div class="swiper-container">
    <transition name="fade">
      <div class="swiper-wrapper" ref="slide">
        <div class="swiper-slide" v-for="(item, index) in skuImageList" :key="item.id">
          <img  :class="{active: index == current}" :src="item.imgUrl" @mouseenter="sliderOnmouse(index)">
        </div>
      </div></transition>
      <div class="swiper-button-next" @click="nextBtn"><i class="el-icon-arrow-right"></i></div>
      <div class="swiper-button-prev" @click="prevBtn"><i class="el-icon-arrow-left"></i></div>
    
  </div>

</template>

<script>

  // import Swiper from 'swiper'
  export default {
    name: "ImageList",
    data() {
      return {
        current: 0,
        swiperC: 0,
        swipeLeft: 0
      }
    },
    props: {
      skuImageList:{
        type: Array,
        default() {
          return []
        }
      }
    },

    computed: {

    },

    methods: {
      // 下一页
      nextBtn() {
        this.$nextTick(() => {
          if(this.swiperC >= (this.skuImageList.length && this.skuImageList.length - 4)) return this.$message({message: '已经是最后一页了', type: 'warning'})
          this.swiperC++
          this.swipeLeft = this.swiperC * -86
          this.$refs.slide.style.left = `${this.swipeLeft}px`
        })
      },

      // 上一页
      prevBtn() {
        if(this.swiperC <= 0) return this.$message({message: '已经是第一页了', type: 'warning'})
        this.swiperC--
        this.swipeLeft += 86
        this.$refs.slide.style.left = `${this.swipeLeft}px`
      },

      // 当鼠标划入触发
      sliderOnmouse(i) {
        this.current = i
        this.$bus.$emit('sliderClickBrother', i)
      },
    },

    beforeDestroy () {
      this.$bus.$off('sliderClickBrother')
    }
  }
</script>

<style lang="less" scoped>
  .fade-enter-active, .fade-leave-active {
    transition: left .8s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    left: 0;
  }

  .swiper-container {
    height: 50px;
    width: 400px;
    box-sizing: border-box;
    padding: 0 12px;
    position: relative;
    margin-top: 10px;
    overflow: hidden;

    .swiper-wrapper {
      padding:0 28px;
      display: flex;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
    }

    .swiper-slide {
      width: 25%;
      height: 50px;
      position: relative;
      flex-shrink: 0;

      img {
        border: 1px solid #ccc;
        padding: 2px;
        width: 50px;
        height: 50px;
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;


        &:hover {
          border: 2px solid #e1251b;
          padding: 1px;
        }
      }

      .active {
        border: 2px solid #e1251b;
        padding: 1px;
      }
    }

    .swiper-button-next {
      left: auto;
      right: 0;
    }

    .swiper-button-prev {
      left: 0;
      right: auto;
    }

    .swiper-button-next,
    .swiper-button-prev {
      position: absolute;
      box-sizing: border-box;
      width: 26px;
      height: 50px;
      background: rgb(235, 235, 235);
      border: 1px solid rgb(204, 204, 204);
      top: 0;
      margin-top: 0;
      cursor: pointer;

      i {
        font-size: 24px;
        padding-top: 13px;
      }
      // &::after {
      //   font-size: 24px;
      // }
    }
  }
</style>